<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/head.css" />
    <link rel="stylesheet" href="css/index.css" />
    <script src="./js/jquery.min.js"></script>
    <script src="./js/swipe.js"></script>
    <script src="./js/cookie.js"></script>
    <script src="./js/ajax.js"></script>
  </head>
  <body>
    <!-- 头部 -->
    <div class="header">
      <div class="head1">
        <img src="./images/header1.png" alt="" />
      </div>
      <div class="head2">
        <img src="./images/ico-comm5.png" alt="" />
      </div>
      <div class="head3">
        <input type="text" class="search" placeholder="请输入想要找的宝贝" />
        <button>搜索</button>
      </div>
      <div class="head4"><a href="denglu.html">立即登录</a></div>
      <div class="head5"><a href="./buy.html">购物车</a></div>
    </div>
    <!-- 导航 -->
    <div class="nav">
      <ul>
        <li><a href="page.html">首页</a></li>
        <li><a href="page.html">枪模主题站</a></li>
        <li><a href="page.html">服饰时尚</a></li>
        <li><a href="page.html">包类专区</a></li>
        <li><a href="page.html">数码外设</a></li>
        <li><a href="page.html">家居日用</a></li>
        <li><a href="page.html">模型手办</a></li>
      </ul>
    </div>

    <!-- 轮播图 -->

    <div class="bananer1">
      <div class="bananer"></div>
    </div>
    <script>
      let arr = ["./images/bananer1.jpg", "./images/bananer2.jpg"];
      new MySwiper(".bananer", arr);
      var navEle = document.querySelector(".nav");
      window.onscroll = function () {
        var num = document.documentElement.scrollTop;
        // console.log(num);
        if (num >= 100) {
          navEle.style.position = "fixed";
          navEle.style.top = "0px";
        } else {
          navEle.style.position = "relative";
          navEle.style.top = "0px";
        }
      };
    </script>
    <!-- 中间内容 -->
    <div class="content">
      <!-- 中间上面内容 -->
      <!-- 1 -->
      <div class="contenttop">
        <div class="titler">
          <h3>模型手办</h3>
          <span>品质重现，限量发售</span>
        </div>
        <div class="titler0">
          <div class="titler1">
            <a href=""><img src="./images/1.jpg" alt="" /></a>
          </div>
        </div>
        <div class="titler2">
          <ul class="titler3">
            <li>
              <a href="page1.html"
                ><img src="./images/2.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">蝴蝶 Q版手办</p>
                  <p class="good-pri">￥79</p>
                </div>
              </a>
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/3.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">运输船合金模型</p>
                  <p class="good-pri">￥699</p>
                </div></a
              >
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/4.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">灵狐正比例手办收藏版</p>
                  <p class="good-pri">￥698</p>
                </div>
              </a>
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/6.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">CF 葵 1/10正比例手办【预售】</p>
                  <p class="good-pri">￥399</p>
                </div></a
              >
            </li>
          </ul>
        </div>
      </div>
      <!-- 2 -->
      <div class="contenttop">
        <div class="titler">
          <h3>个性生活</h3>
          <span>购好物，秀个性</span>
        </div>
        <div class="titler0">
          <div class="titler1">
            <a href=""><img src="./images/7.jpg" alt="" /></a>
          </div>
        </div>
        <div class="titler2">
          <ul class="titler3">
            <li>
              <a href="page1.html"
                ><img src="./images/8.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">鼠标</p>
                  <p class="good-pri">￥339</p>
                </div>
              </a>
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/9.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">如锋双肩包</p>
                  <p class="good-pri">￥139</p>
                </div></a
              >
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/10.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">屠龙毛绒挂件</p>
                  <p class="good-pri">￥50</p>
                </div>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!-- 3 -->
      <div class="contenttop">
        <div class="titler">
          <h3>新颖数码</h3>
          <span>拥有你的专属游戏利器</span>
        </div>
        <div class="titler0">
          <div class="titler1">
            <a href=""><img src="./images/11.jpg" alt="" /></a>
          </div>
        </div>
        <div class="titler2">
          <ul class="titler3">
            <li>
              <a href="page1.html"
                ><img src="./images/12.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">CF 生化来袭 圆盘打火机【现货】</p>
                  <p class="good-pri">￥139</p>
                </div>
              </a>
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/13.png" alt="" />
                <div class="good-info">
                  <p class="good-name">CF 生化来袭 磁吸数据线【现货】</p>
                  <p class="good-pri">￥49.9</p>
                </div></a
              >
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/14.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">CF 生化对决 鼠标垫 -浴血刀锋【现货】</p>
                  <p class="good-pri">￥39.9</p>
                </div>
              </a>
            </li>
            <li>
              <a href="page1.html"
                ><img src="./images/15.jpg" alt="" />
                <div class="good-info">
                  <p class="good-name">CF移动电源fire again</p>
                  <p class="good-pri">￥160</p>
                </div></a
              >
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <div class="footer">
      <div class="footer1">
        <a href=""><img src="./images/20.png" alt="" /></a
        ><a href=""><img src="./images/21.png" alt="" /></a>
      </div>
      <ul class="footer2">
        <li><a href="">购物指南</a></li>
        <li><a href="">配送方式</a></li>
        <li><a href="">常见操作</a></li>
        <li><a href="">售后服务</a></li>
        <li><a href="">关于我们</a></li>
      </ul>
      <div class="footer3">
        <span><img src="./images/22.png" alt="" /></span>
        <span><img src="./images/23.png" alt="" /></span>
      </div>
    </div>
    <div class="footer-end">
      <div class="footer-end1"><img src="./images/24.png" alt="" /></div>
    </div>
    <script></script>
  </body>
</html>
